<template>
	<m-layout class="order-details" title="确认订单" gap="24 24 186 24" :goHome="true">
		<m-address v-if="(goodList[0].wards!==1 && goodList[0].wards!==3)"></m-address>
		<m-block class='goods-msg' gap="0 4 20" spa="20 0 0 0">
			<template v-for="item in $store.state.goods.payGoodsList">
				<m-block class='goods-msg' gap="20 20 0">
					<orderCard :item="item" :price="[item.isdls?item.price3:item.price]" :count="item.buycount"
						:type="goodList.length" :disabled="disabled" :showStock="(goodList[0].wards!==1 && goodList[0].wards!==3)?true:false">
					</orderCard>
				</m-block>
			</template>
			<view class="cell  flex-between">
				<text>商品总价(共{{totalPrice[0]}}件)</text>
				<view class="right flex">
					<m-price v-if="totalPrice[1]" :value="totalPrice[1]" weight="600" color="#333" />
				</view>
			</view>
			<view class="cell flex-between" v-if="goodList[0].wards!==1 && goodList[0].wards!==3">
				<text>运费</text>
				<view class="right">
					<m-price :value="fee" weight="600" color="#333" />
				</view>
			</view>
			<view class="cell flex-between">
				<text>需付款</text>
				<view class="right flex">
					<m-price v-if="plus(totalPrice[1],fee)" :value="plus(totalPrice[1],fee)" weight="600" color="#FA2B47" />
				</view>
			</view>
		</m-block>
		<!-- 		
		<m-block v-if="order1Info.wards == 1" spa="20 0" gap="20" class="hint flex">
			<m-icon :type="isChecked?'icon-chenggong':'icon-weixuanzhongyuanquan'" size="34"
				spa="0 10 0 0" @click="isChecked = !isChecked"
				:color="isChecked?'var(--theme)':''"></m-icon>
			<text @click="isChecked = !isChecked" class="">我已阅读并同意</text>
			<template v-if="otype == 1">
				<text class="yhxy" @click="isChecked=true,Jump('/pages/news/newsDetail/newsDetail'+`?code=thxy`)">《提货协议》</text>
			</template>
			
			<template v-if="otype == 2">
				<text class="yhxy" @click="isChecked=true,Jump('/pages/news/newsDetail/newsDetail'+`?code=tgxy`)">《托管协议》</text>
			</template>
			
			<template v-if="otype == 3">
				<text class="yhxy" @click="isChecked=true,Jump('/pages/news/newsDetail/newsDetail'+`?code=znxy`)">《租赁协议》</text>
			</template>
			 -->
		</m-block>
		<!-- <m-block class='service flex-center' gap="30 20" spa="20 0" @click="goChat()">
			<m-icon size="42" spa="0 16 0 0" type="icon-xiaoxikefu" />
			<text>联系客服</text>
		</m-block> -->
		<!-- <icp></icp> -->
		<view class="footer flex-between">
			<view>
				<view class="totals flex">
					<m-price v-if="plus(totalPrice[1],fee)" :value="plus(totalPrice[1],fee)" weight="600"
						color="#FA2B47"></m-price>
				</view>
				<view class="total_txt">共支付</view>
			</view>
			<view class="flex">
				<m-button :disabled="!buyState" v-if="unsalable" size="small" type="primary"
					@click="submitFn">提交订单</m-button>
				<m-button v-else size="small" type="falls">暂不可售</m-button>
			</view>
		</view>

		<uni-popup ref="copyShow" type="center">
			<view class="copy-popup flex-column">
				<view class="center flex-center"><text>请确认支付是否已完成</text></view>
				<view class="btn-box flex-between" @click="$refs.copyShow.close()">
					<text @click="payShow = true">继续支付</text>
					<text @click="Jump({url: '/pages/order/order',mode: 2})">已完成支付</text>
				</view>
			</view>
		</uni-popup>
		<!-- 二次确认   运费查询 -->
		<uni-popup ref="submitShow" type="bottom">
			<view class="submitShow">
				<view class="">
					<text>确认提交</text>
				</view>
				<view class="">

				</view>
				<view class="">

				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<view class="picker-btn">
					<view class="left" @click="cancel">取消</view>
					<view class="right" @click="confirm">确定</view>
				</view>
				<picker-view :indicator-style="indicatorStyle" :value="valueArr" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in province" :key="index">{{item.district}}</view>
					</picker-view-column>
					<picker-view-column>
						<template v-if="province[valueArr[0]]&&province[valueArr[0]].children">
							<view class="item" v-for="(item,index) in province[valueArr[0]].children" :key="index">
								{{item.district}}
							</view>
						</template>
					</picker-view-column>
					<picker-view-column>
						<template
							v-if="province[valueArr[0]]&&province[valueArr[0]].children&&province[valueArr[0]].children[valueArr[1]].children">
							<view class="item"
								v-for="(item,index) in province[valueArr[0]].children[valueArr[1]].children"
								:key="index">
								{{item.district}}
							</view>
						</template>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</m-layout>
</template>

<script>
	import { distData } from "@/api/Ctrls.js"
	import { CreateOrder, CreateOrder_Car,CreateOrder_1 } from '@/api/Order.js'
	import { MallShopInfo } from '@/api/Goods.js';
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				isChecked: false, //阅读租赁协议
				buyState: true,
				debtType: 2,
				payShow: false,
				payLoading: false,

				isMore: false,
				paySumAmount: 0, // 支付总价格
				orderNoList: [], // 商品订单号集合
				freight: 0,
				unsalable: true, //商品是否可售
				fee: 0,
				disabled: false,
				// 2023年9月4日11:04:32
				// add 2024年1月18日17:14:31
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				valueArr: [0, 0, 0], // 用于判断当前滑动的是哪一列
				province: [], // 数据列表
				are: '',
				areid: 0
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				nowId: state => state.address.nowId,
				goodList: state => state.goods.payGoodsList,
				userbalance: state => state.user.userbalance,
			}),
			//计算总价  , 总量 ,总债权积分 
			totalPrice() {
				let amount = 0,
					sPrice = 0;
				this.fee = 0;
				this.goodList.forEach(async item => {
					item.price3 = item.price3 ? item.price3 : item.price;
					sPrice += this.times(item.isdls ? item.price3 : item.price, item.buycount);
					amount += item.buycount;
					if (item.dualyf && item.dualyf != 0) {
						this.fee = this.plus(this.fee, this.times(item.yf * (item.attrsnum || 1), item
							.buycount));
					} else {
						this.fee = this.plus(this.fee, item.yf * (item.attrsnum || 1));
					}
					if (item.wards == 1 || item.wards == 3) this.fee = 0 //  如果为打印专区商品 运费 0
				})
				console.log('amount===>', amount);
				console.log('sPrice===>', sPrice);
				return [amount, sPrice]
			},
			//第一条商品数据
			order1Info() {
				return this.goodList[0]
			},
		},

		watch: {
		},
		onLoad() {},
		onShow() {
			console.log('this.goodList',this.goodList)
			// this.beforCreateOrder()
			//当重新显示页面时   关闭支付弹窗 打开确认付款弹窗
			if (this.payShow == true) {
				this.payShow = false;
				this.$refs.copyShow.open()
			}
		},
		methods: {
			bindChange(e) {
				const val = e.detail.value;
				if (this.valueArr[0] !== val[0]) {
					this.loadCity(this.province[val[0]].districtId)
				} else if (this.valueArr[1] !== val[1]) {
					this.loadArea(this.province[val[0]].children[val[1]].districtId)
				}
				this.valueArr = val
				console.log('val===>', val)
			},
			confirm(e) {
				let a = this.province[this.valueArr[0]]
				let b = a.children[this.valueArr[1]]
				let c = b.children[this.valueArr[2]]
				console.log('a====>', a)
				console.log('b====>', b)
				console.log('c====>', c)
				console.log('地址===>', `${a.district}${b.district}${c.district}`)
				this.are = `${a.district}${b.district}${c.district}`;
				this.areid = c.districtId;
				this.$refs.popup.close();
			},
			cancel() {
				this.$refs.popup.close();
			},
			selectFn() {
				this.getdistDataFn()
				this.$refs.popup.open()
			},
			// 记载省级数据
			async getdistDataFn() {
				const { success, data } = await distData({
					pid: 1
				})
				if (!success) return
				this.province = data;
				await this.sleep(5)
				this.loadCity(this.province[0].districtId)
			},
			async loadCity(parentId) {
				const { success, data } = await distData({ pid: parentId })
				if (!success) return
				if (this.province[this.valueArr[0]].children === undefined) {
					this.$set(this.province[this.valueArr[0]], 'children', [])
					data.forEach(item => {
						this.province[this.valueArr[0]].children.push(item)
					})
					await this.sleep(5)
					this.loadArea(this.province[this.valueArr[0]].children[this.valueArr[1]].districtId)
				}
			},
			async loadArea(parentId) {
				const { success, data } = await distData({ pid: parentId })
				if (!success) return
				this.area = data;
				console.log('this.province[this.valueArr[0]].children[this.valueArr[1]].children', this.province[this
					.valueArr[0]].children[this.valueArr[1]].children)
				if (this.province[this.valueArr[0]].children[this.valueArr[1]].children === undefined) {
					this.$set(this.province[this.valueArr[0]].children[this.valueArr[1]], 'children', [])
					data.forEach(item => {
						this.province[this.valueArr[0]].children[this.valueArr[1]].children.push(item)
					})
				}
				console.log('this.province==3', this.province)
			},
			// 获取店铺信息
			async getSellerDetail() {
				const { success, data } = await MallShopInfo({
					id: this.goodsInfo.sid
				});
				console.log('店铺信息===>', data, data.userid)
				this.shopInfo = data
			},
			async goChat() {
				this.openURL({ openUrl: 'https://work.weixin.qq.com/kfid/kfcfc1ed477fc398781' })
				// const userID = this.userinfo.userid; // 当前用户ID
				// const kfID = this.getConfig(999); // 客服ID
				// if (Number(userID) == Number(kfID)) {
				// 	return this.Toast('您已是客服')
				// } else {
				// 	this.Jump({
				// 		url: '/pages/chat/chat',
				// 		params: {
				// 			type: 2,
				// 			touid: kfID,
				// 			touserName: '平台客服'
				// 		}
				// 	})
				// }
			},
			// 监听支付方式
			debtRadio({ detail: { value } }) {
				console.log(value)
				this.debtType = value;
			},
			async submitFn() {

				if ((this.order1Info.wards !== 1 && this.order1Info.wards !== 3) && !this.nowId) return this.Toast('请选择收货地址');
				// if (this.order1Info.wards == 1 && !this.isChecked) return this.Toast('请阅读并同意协议');
				// this.$refs.submitShow.open()
				this.goPay()
			},
			//购买前验证
			async goPay() {
				// 创建商品订单   提交 
				// this.goodList.length == 1 ? this.seveOrder() : this.CreateOrder_Car();
				(this.order1Info.wards !== 1 && this.order1Info.wards !== 3) ? this.seveOrder() : this.seveOrder_1();
			},
			// 打印机专区下单
			async seveOrder_1(){
				if (this.goodList[0]['buycount'] > this.goodList[0].stock) {
					return this.Toast('超过最大库存')
				}
				const {success, data, msg }=await CreateOrder_1({
					gid: this.goodList[0]['from'] == 1 ? this.goodList[0]['id'] : this.goodList[0]['gid'],
					count: this.goodList[0]['buycount'],
				})
				this.Toast(msg)
				if (success) {
					await this.sleep(1000)
					this.Jump({
						url: '/pages/order/surePay/surePay?orderid=' + data,
						mode: 2
					})
				}
			},
			// 创建商品订单   提交 
			async seveOrder() {
				if (this.goodList[0]['buycount'] > this.goodList[0].stock) {
					return this.Toast('超过最大库存')
				}
				const { success, data, msg } = await CreateOrder({
					gid: this.goodList[0]['from'] == 1 ? this.goodList[0]['id'] : this.goodList[0][
						'gid'
					],
					attrid: this.goodList[0]['from'] == 1 ? this.goodList[0]['attrId'] : this
						.goodList[0][
							'attrid'
						],
					count: this.goodList[0]['buycount'],
					addrid: this.nowId ,
				})
				this.Toast(msg)
				if (success) {
					await this.sleep(1000)
					this.Jump({
						url: '/pages/order/surePay/surePay?orderid=' + data,
						mode: 2
					})
				}
			},
			// 购物车 创建订单
			// async CreateOrder_Car() {
			// 	let idArr = this.arrObjGetArrByOneKey(this.goodList, 'id', 'string');
			// 	console.log('idArr===>', idArr);
			// 	const { success, data, msg } = await CreateOrder_Car({ aid: this.selfPickup ? 0 : this.nowId, },
			// 		idArr);
			// 	this.Toast(msg);
			// 	if (success) {
			// 		await this.sleep(1000)
			// 		this.Jump({
			// 			url: '/pages/order/surePay/surePay?orderid=' + data,
			// 			mode: 2
			// 		})
			// 	}
			// }
		},
	}
</script>

<style lang="scss">
	.order-details {
		background-size: 100% 326rpx;

		.status-box {
			margin-top: -20rpx;

			.status {
				text {
					padding-left: 18rpx;
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}
			}

			.hint {
				padding-top: 20rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;

				.sy {
					padding-left: 20rpx;
				}
			}
		}

		.goods-msg {

			.title {
				text {
					font-size: 30rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333;
				}
			}

			.cell {
				padding-bottom: 10rpx;
				padding-left: 16rpx;
				padding-right: 16rpx;

				&>text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333;
				}

				.right {
					max-width: 60%;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					text-align: right;

					.copy {
						padding-left: 20rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

				}

				.debt-hint {}

				.debt {
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;

					text:nth-of-type(1) {
						font-size: 40rpx;
					}

					text:nth-of-type(2) {
						font-size: 24rpx;
					}
				}
			}

			.cell1 {
				border-top: 1rpx solid #EEEEEE;
				padding-top: 27rpx;
			}

			.more {
				border-top: 1px solid #EEEEEE;
				text-align: center;
				padding: 23rpx 0;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}
		}

		.hint {
			padding-bottom: 40rpx;
			padding-top: 50rpx;

			text {
				font-size: var(--fs_28);
				color: var(--text_1);
			}

			.yhxy {
				color: var(--theme);
			}
		}

		.service {
			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}


	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;

		padding: 17rpx 24rpx;
		background: #FFFFFF;
		box-sizing: border-box;

		text-align: right;

		.totals {
			// text {
			// 	padding-left: 10rpx;
			// 	font-size: 30rpx;
			// 	font-family: PingFang SC-Regular, PingFang SC;
			// 	font-weight: 400;
			// 	color: #FA2F43;
			// }
		}

		.total_txt {
			font-size: 24rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			text-align: start;
		}

		.m-button {
			font-size: 28rpx;
			padding: 12rpx 26rpx;
		}
	}


	.copy-popup {
		width: 582rpx;
		height: 264rpx;
		background: #ffffff;
		border-radius: 20rpx;

		.center {
			flex: 1;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.btn-box {
			border-top: 1rpx solid #eeeeee;

			text {
				display: inline-block;
				flex: 1;
				text-align: center;
				padding: 26rpx 0;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}

			text:nth-of-type(2) {
				border-left: 1rpx solid #eeeeee;
				color: #FF2323;
			}
		}
	}

	.submitShow {
		background-color: #FFFFFF;
		width: 100%;
		min-height: 400rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.popup {
		height: fit-content;
		width: 100%;
		background: #fff;
	}

	.picker-btn {
		display: flex;
		height: 100upx;
		width: 100%;
		line-height: 100upx;
		background: #fff;
		font-size: 34upx;
		z-index: 1;
		border-bottom: 1rpx solid #f8f8f8;

		.left {
			flex: 1;
			color: #0076FF;
			padding-left: 40upx;
			box-sizing: border-box;
		}

		.right {
			flex: 1;
			text-align: right;
			padding-right: 40upx;
			color: #FE4533;
			box-sizing: border-box;
		}
	}

	picker-view {
		width: 100%;
		height: 500rpx;
		display: relative;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>